<template>

    <el-dialog
            title="充值详情"
            :visible.sync="dialogVisible"
            width="80%"
            :close-on-click-modal="false"
    >
        <div class="container">

            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="sn"
                        label="订单号"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        label="充值金额"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号"
                        width="160">
                </el-table-column>

                <el-table-column
                        prop="status_name"
                        label="状态"
                >
                </el-table-column>

                <el-table-column
                        prop="pay_at"
                        label="开始充值时间"
                >
                </el-table-column>
                <el-table-column
                        prop="recharge_mode_name"
                        label="方式"
                >
                </el-table-column>
                <el-table-column
                        label="执行充值时间"
                >
                    <template slot-scope="scope">
                        <span v-if="scope.row.status>0">{{scope.row.updated_at}}</span>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

        <div style="text-align: center">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </div>
    </el-dialog>

</template>
<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        items: [],
        loading: false,
        params: {
          order_id: 0,
          limit: 20,
          offset: 0
        },
        currentPage: 1,
        total: 0,
      }
    },
    created() {

    },
    methods: {
      fetch() {
        this.loading = true;
        axios.get('/admin/api/mobile/recharge_task', {params: this.params}).then((res) => {
          if (res.data.code === 0) {
            this.items = res.data.data.items;
            this.total = res.data.data.total;
          } else {
            this.$message(res.data.msg);
          }
          this.loading = false;
        }).catch(function() {
          this.$message('系统错误');
          this.loading = false;
        })
      },

      // 切换分页
      setPage: function(page) {
        this.currentPage = page;
        this.params.offset = (page - 1) * this.params.limit;
        this.fetch()
      },
      // 重新请求接口获取数据，参数发生了变化，页码重置为1
      reload: function() {
        if (this.currentPage === 1) {
          this.fetch();
        } else {
          this.setPage(1);
        }
      },
      show(orderId) {
        this.dialogVisible = true;
        this.params.order_id = orderId;
        this.fetch();
      }
    }
  }
</script>